<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_541722_0sjroa2gr0xgk3xr.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .treeSon li{
            margin-left: 20px;
        }
        #app li{
            line-height: 24px;

        }
        #app span{
            display: inline-block;
        }

    </style>
</head>
<body>
<ul id="app"></ul>
</body>
<script>

    var treePar=document.getElementById("app");
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {
            var data = JSON.parse(xhr.responseText);
            if (Array.isArray(data)) {
                for (var i = 0; i < data.length; i++) {
                    treePar.innerHTML += "<li><div class='treeName'><i class='iconfont icon-wenjianjia'></i><span>"+data[i].name+"</span></div>"+traverseTree(data[i])+"</li>";
                }
            } else {
                treePar.innerHTML = "<li ><div class='treeName'><i class='iconfont icon-wenjianjia'></i><span>"+data.name+"</span></div>"+traverseTree(data)+"</li>";
            }
        }
    };
    xhr.open("get", "./data.json");
    xhr.send();

    function traverseTree(node) {
        if (!node) {
            return;
        }
        var ul = "<ul class='treeSon'>";
        if (node.children && node.children.length > 0) {
            for (var i = 0; i < node.children.length; i++) {
                if(traverseTree( node.children[i]).indexOf("li")!=-1){
                    ul += "<li><div class='treeName'><i class='iconfont icon-wenjianjia'></i><span>"+node.children[i].name+"</span></div>"+traverseTree( node.children[i])+"</li>";
                }else{
                    ul += "<li><div class='treeName'><i class='iconfont icon-wenjian'></i><span>"+node.children[i].name+"</span></div></li>";
                }

            }
        }
        ul += "</ul>";
        return ul;
    }


</script>
</html>